<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分润设置</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="Cache" content="no-cache">

    <link rel="stylesheet" href="/sui/css/sm.min.css">
    <link rel="stylesheet" href="/sui/css/sm-extend.min.css">
    <style>
        .no-data .no-record{
            margin: 0 auto;
            margin-top:1.3867rem;
            width: 3.7333rem;
            height:3.44rem;
            background-image: url(/image/no-project@2x.png);
            background-repeat: no-repeat;
            background-size:cover;
        }
        .no-data .wenzi{
            text-align: center;
            margin-top:0.5333rem;
            color: #666666;
            font-size: 0.4rem;
        }
        .card-header{
            /*display: block;*/
            vertical-align:middle
        }
        .content .list-block{
            margin: 0rem!important;
        }
        .content .bar{
            position: unset;
            right:unset;
            top:unset;
        }

        #edit-form .list-block{
            margin-top:2.2rem;
        }

        #edit-form .item-title{
            width:45%!important;
        }

        #add-form .list-block{
            margin-top:2.2rem;
        }

        #add-form .item-title{
            width:45%!important;
        }
    </style>
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav" >
            <a href="#" onclick="window.history.back(); return false;" class="external button button-link button-nav pull-left">
                <span class="icon icon-left"></span>
                返回
            </a>
            <button class="button pull-right open-add-popup" >
                添加分润
            </button>
        </header>
        <!--content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
        <div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom" data-distance="100" data-ptr-distance="55" >

        <!-- 默认的下拉刷新层 -->
        <div class="pull-to-refresh-layer">
            <div class="preloader"></div>
            <div class="pull-to-refresh-arrow"></div>
        </div>


        <div class="list-block cards-list" >
            <ul>
                <!--<li class="card">-->
                <!--<div class="card-header">卡头</div>-->
                <!--<div class="card-content">-->
                <!--<div class="card-content-inner">卡内容</div>-->
                <!--</div>-->
                <!--<div class="card-footer">卡脚</div>-->
                <!--</li>-->

            </ul>
        </div>
        <div class="list-block ">

            <div class="no-data" style="display: none;height:calc(100vh - 10.0867rem);overflow: hidden">
                <div class="no-record"></div>
                <div class="wenzi">
                    <span>当前暂无记录</span>
                </div>
            </div>
        </div>

        <div class="infinite-scroll-preloader"  style="display:none">
            <div class="preloader"></div>
        </div>

    </div>
    </div>
    <div class="popup edit-popup" style="background-color: #efeff4!important;">

        <!--<p><a href="#" class="close-popup"><i style="display:block;width:30px;height:30px;background-image: url(/image/income/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 "></i></a></p>-->
        <header class="bar bar-nav" style="line-height: 2.2rem">
            <a href="javascript:;" class="close-popup"  style="font-size:unset!important;line-height: unset!important;vertical-align: middle">
                <i style="display:inline-block;width:30px;height:30px;background-image: url(/image/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 0.5rem;vertical-align: middle"></i><span style="vertical-align: middle;color: #000000">编辑分润</span>
            </a>
        </header>
        <form id="edit-form" onsubmit="return false" >
            <div class="list-block">
                <ul>
                    <li style="display: none">
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label"></div>
                                <div class="item-input">
                                    <input  type="text" name="id" >
                                </div>
                            </div>
                        </div>
                    </li>

                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">分润名称</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入名称" name="profitName">
                                </div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">分润返还(百分比)</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入消费分佣" name="profitReturn">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" class="button button-big button-fill button-danger">重置</a></div>
                    <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
                </div>
            </div>

        </form>
        <!-- 单个page ,第一个.page默认被展示-->

    </div>
    <div class="popup add-popup" style="background-color: #efeff4!important;">

        <!--<p><a href="#" class="close-popup"><i style="display:block;width:30px;height:30px;background-image: url(/image/income/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 "></i></a></p>-->
        <header class="bar bar-nav" style="line-height: 2.2rem">
            <a href="javascript:;" class="close-popup"  style="font-size:unset!important;line-height: unset!important;vertical-align: middle">
                <i style="display:inline-block;width:30px;height:30px;background-image: url(/image/guanbi.svg);background-position: center center;background-size: 30px 30px;margin: 0 0.5rem;vertical-align: middle"></i><span style="vertical-align: middle;color: #000000">添加分润</span>
            </a>
        </header>
        <form id="add-form"  onsubmit="return false" >
            <div class="list-block">
                <ul>

                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">分润名称</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入名称" name="profitName">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">分润返还(百分比)</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请输入消费分佣" name="profitReturn">
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" class="button button-big button-fill button-danger">重置</a></div>
                    <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
                </div>
            </div>

        </form>
        <!-- 单个page ,第一个.page默认被展示-->

    </div>

</div>


</body>
</html>
<script type='text/javascript' src='/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/sui/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/sui/js/sm-extend.min.js' charset='utf-8'></script>
<script>
    var pageNo=1;
    var pageSize=10;
    // 上次加载的序号
    var lastIndex = 0;
    // 加载flag
    var loading = false;
    //最大加载数量
    var maxItems=0;

    $(document).ready(function () {
        addItems(pageNo,pageSize);
    })

    /**
     * 添加分润
     */
    $(document).on('click','.open-add-popup',function () {
        $.popup('.add-popup');
    })

    $('#add-form .button-success').on('click',function () {
        var profitName=$("#add-form input[name='profitName']").val();
        var profitReturn=$("#add-form input[name='profitReturn']").val();
        if(profitName==null || profitName==undefined || profitName==""){
            $.alert('请输入分润名称');
            return;
        }
        if(profitReturn==null || profitReturn==undefined || profitReturn==""){
            $.alert('请输入消费分佣');
            return;
        }
        var params={name:profitName,consumeProfit:profitReturn};
        $.post('/enterprise_profit/edit',params,function (result) {

            if(result.code==1){
                $.toast(result.message);
                setTimeout(function () {
                    window.location.href="/enterprise_profit/list";
                },500)
            }else{
                $.toast(result.message);
            }
        });
    })

    $('#add-form .button-danger').on('click',function () {
        $("#add-form input[name='profitName']").val('');
        $("#add-form input[name='profitReturn']").val('');
        $("#add-form input[name='profitName']").focus();
    })

    /**
     * 编辑分润
     */
    $(document).on('click','.open-edit-popup',function () {
        var profitId= $(this).data('id');
        var profitName=$(this).siblings('.profitName').text();
        var profitReturn=$(this).parent().siblings('.card-content').find('.profitReturn').text();

        $("#edit-form input[name='id']").val(profitId);
        $("#edit-form input[name='profitName']").val(profitName);
        $("#edit-form input[name='profitReturn']").val(profitReturn);
        $.popup('.edit-popup');
    })

    $('#edit-form .button-success').on('click',function () {
        var profitId= $("#edit-form input[name='id']").val();
        var profitName=$("#edit-form input[name='profitName']").val();
        var profitReturn=$("#edit-form input[name='profitReturn']").val();
        if(profitName==null || profitName==undefined || profitName==""){
            $.alert('请输入分润名称');
            return;
        }
        if(profitReturn==null || profitReturn==undefined || profitReturn==""){
            $.alert('请输入消费分佣');
            return;
        }
        var params={id:profitId,name:profitName,consumeProfit:profitReturn};
        $.post('/enterprise_profit/edit',params,function (result) {

            if(result.code==1){
                $.toast(result.message);
                setTimeout(function () {
                    window.location.href="/enterprise_profit/list";
                },500)
            }else{
                $.toast(result.message);
            }
        });
    })


    $('#edit-form .button-danger').on('click',function () {
        $("#edit-form input[name='profitName']").val('');
        $("#edit-form input[name='profitReturn']").val('');
        $("#edit-form input[name='profitName']").focus();
    })

    //注册下拉时间
    $.initPullToRefresh(".pull-to-refresh-content");
    $(document).on('refresh', '.pull-to-refresh-content',function(e) {

        setTimeout(function () {
            init_datalist();
        },2000)

    });

    function init_datalist() {
        pageNo=1;
        $('.cards-list .card').remove();
        addItems(1,pageSize);
        $.pullToRefreshDone('.pull-to-refresh-content');
    };

    // 注册'infinite'事件处理函数
    $(document).on('infinite', '.infinite-scroll-bottom',function() {

        // 如果正在加载，则退出
        if (loading){
            return;
        }
        // 设置flag
        loading = true;
        if (lastIndex >=maxItems) {

            loading=true;
            if(maxItems!=0){
                $('.infinite-scroll-preloader').hide();
                $.toast("已经到底了");

            }
            return;
        }

        pageNo++;
        $('.infinite-scroll-preloader').show();
        setTimeout(function () {

            addItems(pageNo,pageSize);
            $('.infinite-scroll-preloader').hide();
            $.refreshScroller();
        },500)

    });

    function addItems(pageNo, pageSize) {
        var param={pageNo:pageNo,pageSize:pageSize};
        // 生成新条目的HTML
        $.ajax({
            "url": "/enterprise_profit/queryData",
            "type": "POST",
            async:false,
            data:param,
            success:function (result) {
                maxItems=result.recordsTotal;
                var data=result.data;

                if(data.length==0){

                    $(".no-data").css('display','block');
                    return;
                }else{
                    $(".no-data").css('display','none');
                }
                for(var i=0;i<data.length;i++) {
                    var profit_info =data[i];
                    var html = '';
                    html+= '<li class="card">' +
                        '<div class="card-header">'+
                        // '<div style="vertical-align: center;">'+
                        // '<i style="display: inline-flex;width:44px;height:44px;background-image: url(/image/income/touxiang.svg);background-position: center center;background-size: 44px 44px;margin-right:0.7rem;vertical-align: middle "></i>'+
                        '<span class="profitName">'+profit_info.name+'</span>'+
                        // '</div>'+
                        '<a  href="javascript:;" class="open-edit-popup" data-id='+ profit_info.id+'>'+'编辑'+'</a>'+
                        '</div>' +
                        '<div class="card-content">' +
                        '<div class="item-content">'+
                        '<div class="item-inner" >'+

                        '<span style="font-size: 0.85rem" >'+'分润返还(百分比)'+
                        '</span>'+
                        '<span class="profitReturn">'+
                           profit_info.consumeProfit +
                        '</span>'+
                        '</div>'+
                        '</div>'+
                        '</div>' +
                        '<div class="card-footer">'+
                        '<span style="font-size: 0.85rem" class="createdTime">'+'创建时间'+'</span>'+
                          '<span>'+data[i].createdTime+'</span>' +
                    '</div>' +
                    '</li>';
                    $('.cards-list ul ').append(html);
                }
                lastIndex = $('.card').length;
                loading=false;

            }
        })
    };

    $.init();
</script>